<template>
  <div class="box">
    <h1>B组件,{{ num }}</h1>
    <van-button type="info" @click="handleMinu">数字-</van-button>
    <div v-for="(item, index) in filterGoods" :key="index">
      名称:{{ item.name }} -- 价格:{{ item.price }}
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    num() {
      return this.$store.state.count.num;
    },
    // 在computed中可以直接过滤数据，不太方便复用
    goods() {
      return this.$store.state.goodsModule.goods.filter((item) => {
        return item.price > 500;
      });
    },
    //使用getters数据
    filterGoods() {
      return this.$store.getters["goodsModule/filterGoods"]; //键名中有特殊字符，使用[]
      // let obj = {
      //   name:'123'
      // }
      // console.log(obj.name);
      // obj['goodsModule/filterGoods'] = '456'
    },
  },
  methods: {
    handleMinu() {
      this.$store.commit("count/decrement", 20);
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  height: 400px;
  border: 1px solid #333;
  font-size: 3rem;
}
</style>
